<template>
  <view class="container">
    <!-- 用户名输入框 -->
    <input v-model="username" placeholder="请输入用户名" class="input-field" />
    <!-- 密码输入框 -->
    <input v-model="password" type="password" placeholder="请输入密码" class="input-field" />
    <!-- 登录 -->
    <button @click="handleLogin" class="register-button">登录</button>
	<button @click="goZhuce">去注册</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { login ,userInfo} from '../../api/user';

// 定义响应式变量来存储用户名和密码
const username = ref('');
const password = ref('');



// 去注册
function goZhuce(){
	uni.navigateTo({
		url:"/pages/zhuce/zhuce"
	})
}


// 登录接口
async function goLogin(username,password){
	let r1= await login(username,password)
	console.log(r1.data);
	uni.setStorageSync("token",r1.data.data)
	uni.showToast({
	  title: '登录成功',
	  icon: 'success'
	});
	
	uni.switchTab({
		url:"/pages/my/my"
	})
	
	
	
}

// 处理注册逻辑的函数
const handleLogin = () => {
  // 简单的输入验证，检查用户名和密码是否为空
  if (!username.value || !password.value) {
    uni.showToast({
      title: '用户名和密码不能为空',
      icon: 'none'
    });
    return;
  }
  // 这里可以添加实际的注册逻辑，例如发送请求到后端服务器
  console.log('用户名:', username.value);
  console.log('密码:', password.value);
  goLogin(username.value,password.value)
  
  
 
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.input-field {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
}

.register-button {
  background-color: #007aff;
  color: white;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}
</style>